<template>
  <div>
    <el-header style="height:50px;">
      <el-row>
        <el-col :span="2">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="3">
          <img class="logo" alt="logo" src="../../assets/img/logo.png"/>
        </el-col>
        <el-col :span="13" class="el-col-nav">
          <div class="grid-content bg-purple">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-nav"
                mode="horizontal"
                @select="handleSelect"
                background-color="#202329"
                text-color="#fff"
                active-text-color="#428af5"
                router
                ref="nav">
              <el-menu-item v-popover:selectCity class="el-icon-location-outline" style="color:#428af5;
              width:120px;padding: 0 0;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ city }}&nbsp;
                <span style="font-size:12px;color:white">[切换城市]</span></el-menu-item>
              <el-popover
                  ref="selectCity"
                  placement="top-start"
                  width="180"
                  trigger="click">
                <div style="padding-bottom:5px">切换城市
                  <el-button type="primary" plain style="margin-left: 67px"
                             size="mini" @click="handleChange()">全国
                  </el-button>
                </div>
                <el-cascader
                    size="medium"
                    :options="options"
                    placeholder="请选择"
                    v-model="selectedOptions"
                    filterable
                    @change="handleChange">
                </el-cascader>
              </el-popover>
              <el-menu-item index="/home">首页</el-menu-item>
              <el-menu-item index="/job">职位</el-menu-item>
              <el-menu-item index="/company">公司</el-menu-item>
              <el-menu-item index="/news">资讯</el-menu-item>
              <el-menu-item index="/schoolRecruit">
                <el-badge value="hot" class="item">校园招聘</el-badge>
              </el-menu-item>
              <el-menu-item index="/resumeTemplate">简历模板</el-menu-item>
              <el-menu-item index="/preach">企业宣讲</el-menu-item>
              <el-menu-item index="/community">社区交流</el-menu-item>
              <el-menu-item index="/development">
                <el-badge value="New" class="item">职业发展</el-badge>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple" style="text-align: left;">
            <div v-show="userName==''" style="display: inline-block">
              <el-button round type="primary" size="mini" @click="login">登录</el-button>
              <el-button round type="primary" size="mini" @click="register">注册</el-button>
            </div>
            <div v-show="userName!=''" style="font-size: 16px; position: relative;top: 2px ;display: inline-block;cursor: pointer" @click="goPersonal">
              <i class="el-icon-user-solid">{{ userName }}</i>
            </div>
            <span style="margin-left:10px;"><el-link style="color:white" href="/recruit-company" target="_blank"
                                                     :underline="false">进入企业版</el-link></span>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </el-header>
  </div>
</template>

<script>
import {provinceAndCityData, CodeToText} from 'element-china-area-data'

export default {
  name: "Nav",
  data() {
    return {
      options: provinceAndCityData,
      selectedOptions: [],
      city: '全国',
      cityCode: '0',
      activeIndex: '',
      hrLogin: 'http://localhost/recruit-company',
      userName: '',
    };
  },
  created() {
    var item = localStorage.getItem("cityCode");
    if (item != '0') {
      this.city = CodeToText[item];
    }
  },
  mounted() {
    let p = this.$router.currentRoute.fullPath;
    let arr = p.split("/");
    this.activeIndex = "/" + arr[1];
    if (localStorage.getItem("common_userName")) {
      this.userName = localStorage.getItem("common_userName");
    }
  },
  methods: {
    handleSelect(key) {
      if (this.key != null) {
        this.activeIndex = key;
      }
    },
    goPersonal() {
      window.open("/recruit#/personalCenter/main/baseInfo", "_blank");
    },
    handleChange(value) {
      if (value == null || value.length == 0) {
        this.city = '全国';
        this.cityCode = 0;
      } else if (value.length > 1) {
        if (CodeToText[value[1]] == '市辖区') {
          this.city = CodeToText[value[0]];
          this.cityCode = value[0];
        } else {
          this.city = CodeToText[value[1]];
          this.cityCode = value[1];
        }
      }
      localStorage.setItem("cityCode", this.cityCode);
    },
    login() {
      let personCenter = this.$router.resolve({name: 'login'});
      window.open(personCenter.href, '_blank');
    },
    register() {
      let personCenter = this.$router.resolve({name: 'login', params: {register: 'true'}});
      window.open(personCenter.href, '_blank');
    },
  }

}
</script>

<style scoped>
.logo {
  height: 50px;
}

.grid-content {
  min-height: 50px;
  color: white;
  line-height: 50px;
  font-size: 14px;
}

.el-menu-item {
  padding: 0 15px;
}

.el-menu--horizontal > .el-menu-item {
  height: 50px;
  line-height: 50px;
}

.el-menu.el-menu--horizontal {
  border-bottom: 0;
}

.el-header {
  background: #202329;
  padding: 0;
}

/deep/ .el-badge__content.is-fixed {
  position: absolute;
  top: 14px;
  right: 11px;
  transform: translateY(-50%) translateX(100%);
}

/deep/ .el-badge__content {
  border-radius: 10px;
  color: #FFF;
  display: inline-block;
  font-size: 10px;
  height: 15px;
  width: 26px;
  line-height: 12px;
  padding: 0 0;
  text-align: center;
  white-space: nowrap;
  border: 0;
}
</style>